<template>
  <div>
    <template v-if="readonly">
      <cell v-if="list.length==0&&showList"
            value-align="left">
        <div class="black">附件：无</div>
      </cell>
      <!-- <cell-box v-for="(item,index) in list" :key="index" @click.native="openFile(item)">
        <img width="20" style="display:block;margin-right:5px;" src="../../../assets/img/document.png">
        <span>{{item.FileName}}</span>
      </cell-box> -->
      <!-- <div style="margin:.4rem 0;"
           class="attachment-list"
           v-else>
        <div class="attachment-item"
             style="padding:.8rem 0"
             v-for="(item,index) in list"
             :key="index"
             @click="openFile(item)">
          <div style="display:flex;align-items:center;">
             <icon :name="fileIcon(item.fileOldName)"
                  style="height:1rem;width:1rem;vertical-align:middle;margin-right:10px" />
            <span style="flex:1;font-size:var(--font-size-14)"
                  class="">{{item.fileOldName}}</span>
                <img :width="imgWidth" style="display:block;margin-right:5px;" :src="imgUrl[index]"/>             
          </div> 
            
        </div>
      </div>-->
      <div class="video-upload" v-if="type=='VIDEO'&&this.judgeDeviceType().isIOS" >
        <div v-for="(item,index) in list"
             :key="index"
            style=" display:-webkit-box;overflow-x: auto;;margin-right:11px;padding: 2px 10px;"
             v-viewer="{toolbar: false, navbar: false}">
             <img v-if="item.FileUrl"
               :src="item.FileUrl || item.url"
               class="picture"
               :style="{width: width,height:height,margin: '2px 2px'}" />     

             <div v-else
               style="display:flex;align-items: center;"
               @click="openFile(item)">
               <img src="../../assets/img/video.png"
               class="picture"
               :style="{width: width,height:height,margin: '2px 2px'}">
              <p>{{item.fileOldName}} </p>
             </div>
        </div>
      </div>

      <div v-else class="picture-upload"  >
        <div v-for="(item,index) in list"
             :key="index"
            style=" display:-webkit-box;margin-right:11px;padding: 2px 10px;"
             v-viewer="{toolbar: false, navbar: false}">
          <img v-if="item.FileUrl && item.fileName == 'png'"
               :src="item.FileUrl || item.url"
               class="picture"
               :style="{width: width,height:height,margin: '2px 2px'}" />        
          <!--加载页面时不下载视频，可选择下载播放 -->
          <!-- <div v-else
               style="display:flex;align-items: center;"
               @click="openFile(item)">
            <icon :name="fileIcon(item.fileOldName)"
             class="file-preview"
                  ></icon>
            <p>{{item.fileOldName}} </p>
          </div> -->
          <div class="icon_div" v-else-if="item.FileUrl && item.fileName == 'doc'"  @click="openFile(item)">
            <img class="icon_style" src="../../assets/img/word.png"/>
            <div class="icno_name_pic">{{item.fileOldName}}</div>
          </div>

          <div class="icon_div" v-else-if="item.FileUrl && item.fileName == 'pdf'"  @click="openFile(item)">
            <img class="icon_style" src="../../assets/img/pdf.png"/>
            <div class="icno_name_pic">{{item.fileOldName}}</div>
          </div>

          <div class="icon_div" v-else-if="item.FileUrl && item.fileName == 'excel'"  @click="openFile(item)">
            <img class="icon_style" src="../../assets/img/excel.png"/>
            <div class="icno_name_pic">{{item.fileOldName}}</div>
          </div>

          <div v-else-if="item.fileName == 'video'"
               style="display:flex;align-items: center;"
               @click="openFile(item)">
            <video :id="['video'+index]" preload="auto"   
                   style="object-fit: fill;width: 60px;height: 60px;margin: 2px;" 
                   webkit-playsinline="true" 
                   x-webkit-airplay="true" 
                   playsinline="true" 
                   x5-playsinline="true" 
                   @loadeddata="setCurrent(index)" >
                         <source :src="item.videoUrl" type="video/mp4">
            </video>
          </div>
          
          <div class="icon_div" v-else  @click="openFile(item)">
            <img class="icon_style" src="../../assets/img/default.png"/>
            <div class="icno_name_pic">{{item.fileOldName}}</div>
          </div>

          <!-- 加载下载视频，不能控制进度条-->
          <!-- <div v-else
               class="picture" >
           <video :id="['video'+index]" controls="controls"  preload="auto" width="100%" height="100%"  webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" 
					x5-playsinline="true"  style="object-fit: fill;" @loadeddata="setCurrent(index)">
                  <source :src="item.videoUrl" type="video/mp4">
           </video>
          </div> -->
          
        </div>
      </div>
    </template>
    <div class="my-cell"
         style="padding: 0 15px;"
         v-else>
      <div class="my-cell-title">
        <span class="weui-label"
              style="margin-right:10px;">{{title}}</span>
      </div>
      <!-- 要修改样式-->
      <div class="my-cell-content">
        <div class="show"
             v-for="(item,index) in list"
             :key="index"
             :style="{width:width,height:height}"
             @click="showDetail(item)">
          <div v-if="item.type == 'photo'"
               class="picture"
               :style="'backgroundImage:url('+item.url+')'"> </div>

          <!-- <div v-if="item.type == 'video'"
               class="picture">
                  <icon :name="fileIcon(item.fileOldName)"
                  class="picture"></icon> 
          </div> -->
          <div v-if="item.type == 'video'"
            class="picture" >
            <img  v-if="deviceType"
                  src="../../assets/img/video.png"
                  class="picture"
                  :style="{width: width,height:height,margin: '2px 2px'}">
            <video  v-else
                   :id="['video'+index]"  preload="auto" width="100%" height="100%"  style="object-fit: fill;" 
                   webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-playsinline="true" 
                   @loadeddata="setCurrent(index)">
                  <source :src="item.url" type="video/mp4">
             </video>
          </div>

          <div v-if="item.type == 'audio'"
               class="flex flex-center">
            <icon name="file-audio"
                  class="file-icon"></icon>
          </div>
          <div v-if="!item.type"
               class="flex flex-center">
            <icon :name="fileIcon(item.fileOldName)"
                  class="file-icon"></icon>
          </div>
          <icon name='remove-circle'
                class="photo-delete"
                v-show="!showPercent&&item.guid"
                @click.native.stop="deletePhoto(item)"></icon>
          <!-- <font-awesome-icon :icon="['fas','minus-circle']" class="photo-delete" v-show="!showPercent&&item.guid"
            @click.stop="deletePhoto(item)" /> -->
        </div>
        <!-- style="position:absolute;left:0;top:0" -->
        <div class="show"
             :style="{width:width,height:height,position:'absolute',left:'0',top:'0'}"
             v-show="showPercent">
          <div class="picture mask">
            <x-circle :percent="percent"
                      :stroke-width="6"
                      :trail-width="6"
                      :stroke-color="['#36D1DC', '#5B86E5']"
                      trail-color="#ececec">
              <span style="color:#36D1DC">{{ percent }}%</span>
            </x-circle>
          </div>
        </div>
        <div v-if="false"
             class="show"
             @click="showPopup"
             style="text-algin:right;width:100%;height:1rem;color:var(--theme-color-grey);line-height:1rem;text-align:right;">
          <icon style="height:1rem;width:1rem;"
                name="add-attachment-small"></icon>
        </div>
        <div v-else
             class="show"
             :style="{width:width,height:height}"
             @click="showPopup">
          <div>
            <icon class="file-icon"
                  style="width:20px;height:20px;padding:10px 20px 0;"
                  name="add-attachment2"></icon>
          </div>
          <div style="height:15px;font-size:10px;line-height: 15px;color: #a9a9a9;text-align:center;">添加附件</div>
        </div>
      </div>
    </div>
    <div v-transfer-dom>
      <popup v-model="show"
             is-transparent
             @on-hide="closeMask">
        <div class="photo-choice"
             style="height:9.5rem;">
          <!-- <div class="photo-choice-item" @click="camera()">
            <div class="photo-choice-icon flex flex-center">
              <icon class="flex-grow choice-icon" name="camera"></icon>
            </div>
            <div class="photo-choice-title">拍照</div>
          </div> -->
          <div v-if="(fileType.indexOf('image')!=-1)&&(type!='VIDEO')"
               class="photo-choice-item"
               @click="library()">
            <!-- <img src="../../../assets/img/gallery.png" class="photo-choice-icon" /> -->
            <div class="photo-choice-icon flex flex-center">
              <icon class="flex-grow choice-icon"
                    name="add-image"></icon>
            </div>
            <div class="photo-choice-title">图片</div>
          </div>
          <!-- <div v-if="fileType.indexOf('audio')!=-1"
               class="photo-choice-item"
               @click="audio()">
             <img src="../../../assets/img/camera.png" class="photo-choice-icon" /> 
            <div class="photo-choice-icon flex flex-center">
              <icon class="flex-grow choice-icon"
                    name="add-audio"></icon>
            </div>
            <div class="photo-choice-title">录音</div>
          </div> -->
          <div v-if="(fileType.indexOf('video')!=-1)&&(type!='PHOTO')"
               class="photo-choice-item"
               @click="video()">
            <!-- <img src="../../assets/img/gallery.png" class="photo-choice-icon" /> -->
            <div class="photo-choice-icon flex flex-center">
              <icon class="flex-grow choice-icon"
                    name="add-video"></icon>
            </div>
            <div class="photo-choice-title">录像</div>
          </div>

          <div v-if="(fileType.indexOf('video')!=-1)&&(type!='PHOTO')"
               class="photo-choice-item"
               @click="camera()">         
            <div class="photo-choice-icon flex flex-center">
              <img src="../../assets/img/gallery.png" class="photo-choice-icon" /> 
            </div>
            <div class="photo-choice-title">本地视频</div>
          </div>
        </div>
      </popup>
    </div>
    <!-- <div v-transfer-dom>
      <x-dialog hide-on-blur
                v-model="visiable"
                class="file-preview"
                :dialog-style="{'background-color': 'transparent'}">
        <img v-if="fileIcon(currentFile.fileOldName)=='doc_img'"
             :src="imagePreview"
             class="preview-image" />
        <div v-else>
          <icon :name="fileIcon(currentFile.fileOldName)"
                class="preview-file"></icon>
          <p>
            {{currentFile.fileOldName}}
          </p>
        </div>
        <icon name="close"
              @click.native="visiable = false"
              class="close-svg" />
      </x-dialog>
    </div> -->
    <!-- <preview :imgSrc="imgSrcUrl" v-show="previewFlag" @clickit='previewFlag=false'></preview> -->
  </div>
</template>

<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
import preview from '@/components/file-upload/preview'
import { constants } from 'crypto';
import { type } from 'os';
Vue.use(Viewer, {
  defaultOptions: {
    zIndex: 9999
  }
});
export default {
  name: 'taskAssignmentFileUpload',
  components: {
    preview
  },
  props: {
    type:{
      type: String,
      default: 'PHOTO'
    },  //PHOTO,VIDEO,ALL
    fileKey: {
      type: String,
      default: 'fileName'
    },
    fileType: {
      type: String,
      default: 'camera,image,audio,video'
    },
    belongSubSys: {
      type: String, //系统地址
      default: ''
    },
    server: {
      type: String,
      default: ''
    },
    params: {
      type: String,
      default: ''
    },
    isTask: {
      type: Boolean,
      default () {
        return false //任务代办
      }
    },
    title: {
      type: String,
      default: "" //cell中名称
    },
    fileKey: {
      type: String,
      default: 'fileName'
    },
    pageToken: {
      type: String, //参数，页面token
      default: ''
    },
    // fieldToken: {
    //   type: String, //参数，附件token
    // },
    value: {
      type: String,
      default: '' // 绑定值
    },
    readonly: {
      type: Boolean,
      default () {
        return false //是否上传
      }
    },
    edit: {
      type: Boolean,
      default () {
        return false
      }
    },
    width: {
      type: String,
      default: "60px"
    },
    height: {
      type: String,
      default: "60px"
    },
    imgWidth: {
      type: String,
      default: "60px"
    },
  },
  data () {
    return {
      deviceType:this.judgeDeviceType().isIOS,
      testPhoto: '',
      show: false,
      showList: false,
      list: [],
      imgUrl: [],
      percent: 0,
      showPercent: false,
      openFlag: true,
      currentFile: {
        fileOldName: "附件",
      },
      visiable: false,
      fieldToken: '',
      imgSrcUrl: "",
      previewFlag: false,
    }
  },
  created () {
    if (this.value) {
      this.getAttachment()
      this.fieldToken = this.value
    } else {
      this.fieldToken = this.guid()
    }
    //this.pageToken = this.guid()
    this.openFlag = true
    // if (this.isTask) {
    //   if (this.value.length) {
    //     this.list = []
    //     this.getAttachment()
    //   }
    // }
  },
  methods: { 
    //设置视频初始播放时间，在移动端才能展示预览图
    setCurrent(index){
      var video=document.getElementById("video"+index);
      video.currentTime=0;
      video.controlsList="nodownload";
    } ,
    preview (fileUrl, url) {
      if (fileUrl == undefined) {
        this.imgSrcUrl = url;
      } else {
        this.imgSrcUrl = fileUrl;
      }
      this.previewFlag = true;
    },
    showDetail (item) {
      this.currentFile = Object.assign({}, item)
      this.$nextTick(() => {
        this.visiable = true
      })
    },
    showPopup () {
      this.show = true
    },
    //拍照
    camera () {
      this.capturePhoto(Camera.PictureSourceType.PHOTOLIBRARY)
      // this.capturePhoto(Camera.PictureSourceType.CAMERA)
    },
    //图库
    library () {
      if (this.showPercent) {
        return false
      }
      //   //console.log('进入图库')
      // this.capturePhoto(Camera.PictureSourceType.PHOTOLIBRARY)
      ImagePicker.getPictures((result) => {
        result.images.forEach((item) => {
          this.onPhotoDataSuccess(item.path)
        })
      }, (err) => {
        // alert(err);
      }, {
          // maximumImagesCount : 9, 
          // width : 1920, 
          // height : 1440, 
          quality: 100
        });
    },
    //录音
    audio () {
      navigator.device.capture.captureAudio(this.onAudioSuccess, this.onFail, {
        duration: 15
      });
    },
    //录像
    video () {
      navigator.device.capture.captureVideo(this.onVideoSuccess, this.onFail, {
        
      });//不设置duration，无录制时长限制
    },


    //获取照片/视频
    capturePhoto (source) {
      //获取视频
      this.test=navigator.camera.getPicture(this.onVideoDataSuccess, this.onFail, {
        quality: 100,
        destinationType: device.platform == 'iOS' ? Camera.DestinationType.NATIVE_URI : Camera.DestinationType
          .FILE_URI,
        sourceType: source,
        mediaType: Camera.MediaType.VIDEO,
        targetWidth: 300, // 以像素为单位,图片比例保持不变</span>  
        targetHeight: 300 // 以像素为单位,图片比例保持不变</span>  
      });
      // //获取照片
      // navigator.camera.getPicture(this.onPhotoDataSuccess, this.onFail, {
      //   quality: 100,
      //   destinationType: device.platform == 'iOS' ? Camera.DestinationType.NATIVE_URI : Camera.DestinationType
      //     .FILE_URI,
      //   sourceType: source,
      //   mediaType: Camera.MediaType.ALLMEDIA,
      //   targetWidth: 300, // 以像素为单位,图片比例保持不变</span>  
      //   targetHeight: 300 // 以像素为单位,图片比例保持不变</span>  
      // });
    },

    //视频获取成功
      onVideoDataSuccess (videoURL) {
      const id = this.guid()
      let obj = {
        url: videoURL,
        guid: id,
        type: 'video'
      }
      this.list.push(obj)
      this.$store.commit('OFFLINE_FLIEURL', this.list)
      this.upload(videoURL, id)
      },



    //图片获取成功
    onPhotoDataSuccess (imageURL) {
      // var smallImage = document.getElementById('smallImage');
      // smallImage.style.display = 'block';
      // smallImage.src = imageURL;
      // 开始上传
      this.convertImgToBase64(imageURL, (val) => {
        const id = this.guid()
        let obj = {
          url: imageURL,
          guid: id,
          type: 'photo'
        }
        this.list.push(obj)
        this.showPercent = true
        this.$store.commit('OFFLINE_FLIEURL', this.list)

        this.upload(imageURL, id);

      })
      // alert(imageURL)
    },
    onAudioSuccess (mediaFiles) {
      var i, path, len;
      //遍历获取录制的文件（iOS只支持一次录制一个视频或音频）
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        path = mediaFiles[i].fullPath;
        // alert("录制成功！\n\n" +
        //   "文件名：" + mediaFiles[i].name + "\n" +
        //   "大小：" + mediaFiles[i].size + "\n\n" +
        //   "localURL地址：" + mediaFiles[i].localURL + "\n\n" +
        //   "fullPath地址：" + path);
      }
      const id = this.guid()
      let obj = {
        url: path,
        guid: id,
        type: 'audio'
      }
      this.list.push(obj)
      this.upload(path, id)
    },
    onVideoSuccess (mediaFiles) {
      var i, path, len;
      //遍历获取录制的文件（iOS只支持一次录制一个视频或音频）
      for (i = 0, len = mediaFiles.length; i < len; i += 1) {
        path = mediaFiles[i].fullPath;
        // alert("录制成功！\n\n" +
        //   "文件名：" + mediaFiles[i].name + "\n" +
        //   "大小：" + mediaFiles[i].size + "\n\n" +
        //   "localURL地址：" + mediaFiles[i].localURL + "\n\n" +
        //   "fullPath地址：" + path);
      }
      const id = this.guid()
      let obj = {
        url: path,
        guid: id,
        type: 'video'
      }
      this.list.push(obj)
      this.upload(path, id)
    },
    //拍照失败
    onFail (message) {
      ////console.log(message)
    },

    //上传文件
    upload (fileURL, guid) {
      //   //console.log("picture_uploadlist",this.list)
        console.log('进入upload:' + fileURL)
        console.log("picture_upload",guid)
      var success = (r) => { //上传成功
        console.log('上传成功')
        console.log(r)
        // //console.log(r.response)
        // //console.log(JSON.parse(r.response))
        this.list.map(item => {
          if (item.guid == guid) {
            // if (this.belongSubSys != '') {
            item.fileOldName = JSON.parse(r.response)[0].name
            item.fileId = JSON.parse(r.response)[0].id
            item.fieldToken = JSON.parse(r.response)[0].fieldToken
            item.size = JSON.parse(r.response)[0].size
            // } else if (this.server != '') {
            // item.fileId = JSON.parse(r.response).fileId // moaapi/feedback 接口
            // }
          }
        })
        this.showPercent = false
        this.percent = 0
        // this.$emit('input', this.list)
        this.show = false
      }
      var fail = (error) => { // 上传失败
        console.log(JSON.stringify(error))
        // ////console.log('photoFailed')
        this.showPercent = false
        this.percent = 0
        console.log("上传失败")
        const _this = this;
        this.$vux.confirm.show({
            // 组件除show外的属性
            title: "提示",
            content: "当前无网络，请点击确认进行后续操作。",
            showCancelButton:false,
            onConfirm() {
              _this.show = false
            }
          });
      }
      var options = new FileUploadOptions();
      //console.log("fileUpload:" + options)
      options.fileKey = this.fileKey;
      options.fileName = fileURL.substr(fileURL.lastIndexOf('/'), fileURL.lastIndexOf('?') - fileURL.lastIndexOf(
        '/'));
      if (!options.fileName) {
        options.fileName = fileURL.substr(fileURL.lastIndexOf('/'));
      }
      options.mimeType = "application/octet-stream";
      options.httpMethod = 'POST',
        options.headers = {
          "Accept": "*/*",
          "Accept-Encoding:": "gzip, deflate",
          "Accept-Language": " zh-CN,zh;q=0.9",
          "Connection": "keep-alive",
        }
      options.chunkedMode = false,
        // 如果要传参数，写这里
        options.params = {
          Filename: fileURL.substr(fileURL.lastIndexOf('/') + 1),
          Upload: "Submit Query",
          // modularName: 'CNL',
          // allowType: 'jpeg;jpg;png;pdf;doc;xls;xlsx;docx',
        }
      var ft = new FileTransfer();
      //注册监听上传进度
      ft.onprogress = (progressEvent) => {
        if (progressEvent) {
          this.percent = Math.round(progressEvent.loaded * 100 / progressEvent.total);
        }
      };
      let params =
        "type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.saveTempAttachment%27,%27_param%27:{pageToken:%27" +
        this.pageToken + "%27,fieldToken:%27" + this.fieldToken + "%27,datatype:%27Store.ecidiDoc%27}}"
      if (device.platform == 'iOS') {
        // params =
        // "type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.saveTempAttachment%27,%27_param%27:{pageToken:%27" +
        // this.pageToken + "%27,fieldToken:%27" + this.fieldToken + "%27,datatype:%27Store.ecidiDoc%27}}"
        params =
          "type=customerDownloadService&FixJSON={'_method':'streamSupportService.saveTempAttachment','_param':{'pageToken':'" +
          this.pageToken + "','fieldToken':'" + this.fieldToken + "',datatype:'Store.ecidiDoc'}}"
      }
      //'type=%27customerDownloadService%27&FixJSON=%7B%27_method%27:%27streamSupportService.saveTempAttachment%27,%27_param%27:%7B%27pageToken%27:%27' +
      //  this.pageToken + '%27,%27fieldToken%27:%27' + this.fieldToken + '%27%7D%7D'

      //上传地址
      let SERVER = ''
      // if (this.belongSubSys != '') {
      SERVER = this.COMMON_URL.replace('Action.cmd', 'StreamSupportAction.cmd') + "?" + params
      // }
      console.log('开始上传'+SERVER)
      // if (this.server != '') {
      //   SERVER = this.server
      //   params = this.params == '' ? '' : this.params
      // }
      //console.log('开始上传' + SERVER)
      if (device.platform == 'iOS') {
        SERVER = encodeURI(SERVER)
      }

      ft.upload(fileURL, SERVER, success, fail, options)
    },
    // 把图片转成base64  
    convertImgToBase64 (url, callback, outputFormat) {
      var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
      img.crossOrigin = 'Anonymous';
      const _this = this
      img.onload = function () {
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        var dataURL = canvas.toDataURL(outputFormat || 'image/png');
        ////console.log(dataURL)
        callback(dataURL);
        canvas = null;
      };
      img.src = url;
    },
    deletePhoto (item) {
      let method = 'post'
      let SERVER = this.COMMON_URL.replace('Action.cmd', 'StreamSupportAction.cmd') + "?" +
        "type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.deleteTempAttachment%27,%27_param%27:{pageToken:%27" +
        this.pageToken + "%27,fieldToken:%27" + this.fieldToken + "%27,fileName:%27" + item.fileId +
        "%27}}"
      if (this.server != '') {
        SERVER = this.server
        method = 'delete'
      }
      for (let index = 0; index < this.list.length; index++) {
        if (this.list[index].guid == item.guid) {
          this.list.splice(index, 1)
          this.$ajax({
            method: method,
            url: SERVER,
            data: {}
          }).then((res) => {
            ////console.log(res)
            if (res.status == 200) {

            } else {
              this.list.splice(index, 0, item)
            }
          })
        }
      }

    },
    //获取附件-----
    getAttachment () {
      this.list = [] // 先清空附件列表
      let vText = '{"_method":"streamSupportService.getAttachmentInfos","_param":[{"fieldToken":"' + this.value +
        '"}]}'
      this.$ajax({
        method: 'post',
        url: this.COMMON_URL,
        wait: true,
        data: {
          FixJSON: vText
        }
      }).then((res) => {
        console.log("附件",res)
        if (res.data.attachments) {
          
          let array = [];
          if (res.data.attachments) {
            var temp = [];
            var temp1;
            res.data.attachments.map(item=>{
              if(item.fileOldName.indexOf("_comp")!=-1){
                temp.push(item);
              }
            })
            //如果不是图片temp为空那么循环原始数据
            if(temp.length == 0){
              temp1 = res.data.attachments;
            }else{
              temp1 = temp
            }
           temp1.map(item => {
              if (this.fileIcon(item.fileOldName) == 'doc_img') {
                let object = {
                  fileName: "png",
                  FileUrl:
                    this.FORM2SUBSYS_SUPPORT_URL +
                    "?type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.getAttachment%27,%27_param%27:{attachmentId:" +
                    item.systemSeq +
                    "}}"
                };
                array.push(object)
              }else if(this.fileIcon(item.fileOldName) == 'doc_word'){
                 let object = {
                  fileName: "doc",
                  FileUrl:
                    this.FORM2SUBSYS_SUPPORT_URL +
                    "?type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.getAttachment%27,%27_param%27:{attachmentId:" +
                    item.systemSeq +
                    "}}",
                    fileOldName : item.fileOldName,
                    fileId: item.fileId,
                    fileSize: item.size,
                };
                array.push(object)
              }else if(this.fileIcon(item.fileOldName) == 'doc_pdf'){
                let object = {
                  fileName: "pdf",
                  FileUrl:
                    this.FORM2SUBSYS_SUPPORT_URL +
                    "?type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.getAttachment%27,%27_param%27:{attachmentId:" +
                    item.systemSeq +
                    "}}",
                    fileOldName : item.fileOldName,
                    fileId: item.fileId,
                    fileSize: item.size,
                };
                array.push(object)
              }else if(this.fileIcon(item.fileOldName) == 'doc_excel'){
                let object = {
                  fileName: "excel",
                  FileUrl:
                    this.FORM2SUBSYS_SUPPORT_URL +
                    "?type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.getAttachment%27,%27_param%27:{attachmentId:" +
                    item.systemSeq +
                    "}}",
                    fileOldName : item.fileOldName,
                    fileId: item.fileId,
                    fileSize: item.size,
                };
                array.push(object)
              }else if(this.fileIcon(item.fileOldName) == 'doc_video'){
                //加载时下载视频
                // let object = {
                //   fileName: "mp4",
                //   videoUrl:
                //     this.FORM2SUBSYS_SUPPORT_URL +
                //     "?type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.getAttachment%27,%27_param%27:{attachmentId:" +
                //     item.systemSeq +
                //     "}}"
                // };
                // array.push(object)
                
                //加载时不下载视频
                item.fileName = "video"
                item.videoUrl=
                    this.FORM2SUBSYS_SUPPORT_URL +
                    "?type=customerDownloadService&FixJSON={%27_method%27:%27streamSupportService.getAttachment%27,%27_param%27:{attachmentId:" +
                    item.systemSeq +
                    "}}"
                array.push(item) 
              }else{
                array.push(item)
              }

            });
            this.list = [...array];
            console.log("我的list",this.list);
            this.$store.commit("updateLoadingStatus", false);
          }
        }
      })
    },
    openFile (item) {
      ////console.log('openFIleclick')
      // if (!this.openFlag) {
      //   return
      // } 
      // this.openFlag = false
      const data = {
        name: item.fileOldName,
        fileId: item.fileId,
        // url: item[this.urlKey],
        fileSize: item.size,
        belongSubSys: this.belongSubSys,
        isTask: this.isTask
      }
      this.$store.commit("DOWNLOAD_FILE", data)
      this.$router.push('/download')
    },
    fileIcon (name) {
      name = name + ''
      switch (name.substring(name.lastIndexOf(".")).toLowerCase()) {
        case '.dir':
          return 'doc_folder'
        case '.docx':
          return 'doc_word'
        case '.doc':
          return 'doc_word'
        case '.pdf':
          return 'doc_pdf'
        case '.xlsx':
          return 'doc_excel'
        case '.rar':
          return 'doc_zip'
        case '.zip':
          return 'doc_zip'
        case '.ppt':
          return 'doc_ppt'
        case '.pptx':
          return 'doc_ppt'
        case '.txt':
          return 'doc_txt'
        case '.html':
          return 'doc_html'
        case '.exe':
          return 'doc_exe'
        case '.jpg':
        case '.png':
        case '.jpeg':
        case '.gif':
        case '.bmp':
          return 'doc_img'
        case '.amr':
        case '.wav':
          return 'doc_music'
        case '.mp4':
        case '.mov':
        case '.rmvb':
        case '.avi':
        case '.flv':  
          return 'doc_video'
        default:
          return 'doc_blank'
      }
    }
  },
  computed: {
    row () {
      return this.$store.state.currentRow
    },
    imagePreview () {
      // return this.baseUrl + '/zjk/' + this.currentFile.fileUrl 

      if (this.currentFile.guid) {
        return this.COMMON_URL.replace('Action.cmd', 'StreamSupportAction.cmd') + "?" +
          "type=customerDownloadService&FixJSON={'_method':'streamSupportService.previewTempAttachment','_param':{pageToken:'" +
          this.pageToken + "',fieldToken:'" + this.fieldToken + "',fileName:'" + this.currentFile.fileId + "'}}"
      } else {
        return this.COMMON_URL.replace('Action.cmd', 'StreamSupportAction.cmd') + "?" +
          "type=customerDownloadService&FixJSON={'_method':'streamSupportService.getAttachment','_param':{'attachmentId':'" +
          this.currentFile.fileId + "'}}"

      }

    }
  },
  watch: {
    "value" () {
      if (this.readonly) {

        this.getAttachment()
        this.fieldToken = this.value

      }
    },
    list () {
      if (!this.readonly && !this.value && this.edit == false) {
        if (this.list.length != 0) {
          console.log(this.fieldToken)
          this.$emit('input', this.fieldToken)
        } else if (this.list.length == 0) {
          this.$emit('input', '')
        }
      }
    }
  }
}

</script>

<style lang="less" scope>
// * {
//   margin: 0;
//   padding: 0;
// }

.show {
  // width: 60px;
  // height: 60px;
  overflow: visible;
  position: relative;
  // display: inline-block;
  // vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 15px 10px 15px 0;
  background: #eee;
  border-radius: 4px;
  &.small {
    width: 1rem;
    height: 1rem;
  }
}

.picture {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 4px;
  &.small {
    height: 1rem;
    width: 1rem;
  }
}

.photo-choice {
  width: 100%;
  background-color: #f5f5f5;
  margin: 0 auto;
  // border-radius: 5px;
  display: flex;
  display: -webkit-flex;
}

.photo-choice-item {
  // padding: 10px 0;
  text-align: center;
  font-size: 12px;
  flex: auto;
  margin: 1rem;
}

// .photo-choice-item:active {
//   // background-color: #DEDEDE;
// }

.photo-choice-icon {
  position: relative;
  height: 4.5rem;
  width: 4.5rem;
  margin: auto;
  border-radius: 1rem;
  background: #fff;

  .choice-icon {
    height: 1.8rem;
    width: 1.8rem;
    color: #656769;
    margin-top: 30%;
  }

  // &:hover {
  //   // background: #a9a9a9;
  //   // .choice-icon {
  //   //   color:#fff;
  //   // }
  // }
}

.photo-choice-title {
  color: #a9a9a9;
  margin-top: 0.6rem;
  font-size: 0.83rem;
}

.show .photo-delete {
  height: 20px;
  width: 20px;
  position: absolute;
  top: -10px;
  color: #ff4500;
  right: -8px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #fff;
}

.file-icon {
  width: 100%;
  height: 100%;
  color: #656769;
}

.mask {
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: opacity 400ms;
  transition: opacity 400ms;
  width: 50px;
  height: 50px;
}

.attachment-item {
  &:active {
    color: #a9a9a9;
  }

  // &:visited {
  //   color: #000;
  // }
}

.attachment-item:not(:last-child) {
  border-bottom: 1px solid rgba(242, 244, 246, 1);
}

.file-preview {
  .weui-dialog {
    overflow: visible;
  }

  .preview-file {
    padding: 2rem 0 0;
    width: 50%;
    height: auto;
  }

  .preview-image {
    max-width: 100%;
    height: auto;
    max-height: 80vh;
  }

  p {
    padding: 1rem 0;
    width: 60%;
    margin: 0 auto;
    font-size: 1rem;
    white-space: normal;
    word-break: break-all;
    color: #fff;
  }

  .close-svg {
    padding: 0;
    position: absolute;
    width: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.8);
    height: 1rem;
    padding: 0.2rem;
    color: rgba(255, 255, 255, 0.8);
    left: 50%;
    bottom: -3rem;
    transform: translate(-50%);
  }
}
.picture-upload {
  display: flex;
  overflow-x: auto;
  flex-flow: row;
}
.video-upload {
  flex-direction:column;
  display: -webkit-box;
  overflow-x: auto;
}
.my-cell-content {
  display: -webkit-box;
  overflow-x: auto;
}
div::-webkit-scrollbar {
  position: relative;
  top: 72px;
  width: 0px;
  height: 0px;
  background: rgba(221, 221, 221, 1);
  z-index: 1200;
}

div::-webkit-scrollbar-track {
  width: 0px;
  background: #ffffff;
  text-align: center;
}

div::-webkit-scrollbar-thumb {
  width: 0px;
  border-right: 6px solid #ffffff;
  background: rgba(221, 221, 221, 1);
  border-radius: 2px;
}

video::-webkit-media-controls-enclosure{ overflow: hidden; }

video::-webkit-media-controls-panel{ width: calc(100% + 15px); }

.icon_style{
  width: 20px;
  height: 20px;
  margin: 0px 0px 0px 5px;
}
.icon_div{
  display: flex;
  align-items: center;
}
.icno_name_pic{
  margin: 10px;
}
</style>
